<template>
  <el-dialog title="预览文章" :visible.sync="dialogVisible" width="width">
    <el-row>
      <h1>{{ item.title }}</h1>
      <p class="two">
        {{ item.createTime }}&nbsp;&nbsp; {{ item.username }}&nbsp;<svg-icon
          icon-class="eye-open"
        />&nbsp;{{ item.visits }}
      </p>
    </el-row>
    <div class="content" v-html="item.articleBody" />
    <div slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      item: {}
    }
  }
}
</script>

<style scope>
.two {
  padding-left: 15px;
}
.content {
  border-top: 1px dashed #ccc;
  background-color: #f5f5f5;
  margin-top: 10px;
  padding-left: 15px;
}
</style>
